<template>
  <div class="aside">
    <el-scrollbar class="el-scrollbar-x-hidden">
      <elan-menu
        :collapse="!isCollapse"
        :list="AllPermissionList"
        class="elan-menu"
        :collapse-transition="true"
        :props="props"
        router
      ></elan-menu>
    </el-scrollbar>
    <div class="footer">
      <div class="footer-item" @click="handleClickMessage">
        <img class="img" :src="bell" />
        <span class="text">消息</span>
      </div>
      <div class="footer-item">
        <img class="avatar" :src="defaultAvatar" />
        <span class="text">{{ userInfo.user_name || "" }}</span>
        <elan-svg
          icon="code"
          class="code"
          @click="handleClickQrCode"
        ></elan-svg>
      </div>
    </div>
    <el-dialog
      title="通知"
      :visible.sync="messageVisible"
      width="480px"
      :before-close="handleClose"
      append-to-body
    >
      <div class="content-box">
        <p class="content" v-html="message.content"></p>
        <p class="time">{{ message.createTime }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import brain from "@/assets/images/brain.png";
import defaultAvatar from "@/assets/images/defaultAvatar.png";
import bell from "@/assets/images/bell.png";
import { getNoticeList } from "@/api";
export default {
  components: {
    ElanMenu: () => import("./ElanMenu/index"),
  },
  data() {
    return {
      brain,
      index: "/",
      menuList: this.$menuList,
      defaultAvatar: defaultAvatar,
      bell: bell,
      props: {
        path: "url",
        children: "permissionChildList",
        title: "name",
        parentid: "parentid",
        icon: "icon",
      },
      userInfo: null,
      messageVisible: false,
      message: {
        content: "",
        createTime: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      isCollapse: "GET_IS_COLLAPSE",
    }),
    ...mapGetters({
      AllPermissionList: "GET_ALL_PERMISSION_LIST",
    }),
  },
  watch: {
    $route: {
      handler: function(to, from) {
        if (to.path.split("/").length > 2) {
          this.index = "/" + to.path.split("/")[1];
        } else {
          this.index = to.path;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo")) || {};
    this.getNoticeListFn();
  },
  methods: {
    handleClickQrCode() {
      this.$router.push("/serviceTools/servicePage");
    },
    handleClickMessage() {
      if (!this.message.content) {
        this.$message.warning("暂无通知");
        return;
      }
      this.messageVisible = true;
    },
    getNoticeListFn() {
      const params = {
        platform: 0,
        cardType: 0,
      };
      getNoticeList(params).then((res) => {
        if (res.code == 200 && res.data.id && res.data.content) {
          this.message = res.data;
          this.message.content = res.data.content.replace(/\n/g, "<br>");
          const lastMessageId = localStorage.getItem("messageId");
          localStorage.setItem("messageId", res.data.id);
          if (!lastMessageId || lastMessageId < res.data.id) {
            this.messageVisible = true;
          }
        }
      });
    },
    handleClose() {
      this.messageVisible = false;
    },
    handleCollapse() {
      this.$store.commit("SET_IS_COLLAPSE", !this.isCollapse);
    },
    handleRootMenu(item) {
      if (item.redirect && this.$route.path !== item.redirect) {
        this.$router.push(item.redirect);
      }
    },
    jumpTo(route) {
      if (this.$route.path === "/dataDetail") {
        this.$menuList[0].icon = "dataOverviewActive";
        this.$menuList[1].icon = "dataDetail";
      }
      if (this.$route.path === "/userProcessDataManage") {
        this.$menuList[0].icon = "dataOverview";
        this.$menuList[1].icon = "dataDetailActive";
      }
      if (this.$route.path !== route) {
        this.$router.push(route);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.aside {
  position: fixed;
  z-index: 99;
  height: calc(100vh - 54px);
  width: 210px;
  overflow-y: auto;
  background: #eff1f4;
  user-select: none;

  ::v-deep .el-scrollbar {
    height: calc(100vh - 121px - 54px);
  }

  ::v-deep .el-menu {
    border-right: none !important;
    background: #eff1f4;

    .el-menu-item {
      padding: 0 16px 0 14px !important;
      margin-left: 12px;
      color: #8892a6;
      font-size: 16px;
      font-weight: 600;
      &:hover {
        background-color: #f0f2f5;
        border-radius: 6px;
        color: #222;
      }
      &.is-active {
        background-color: #dcdee3;
        border-radius: 6px;
        color: #222;
        font-weight: 600;
      }
    }
    .el-submenu {
      .el-submenu__title {
        padding: 0 16px 0 26px !important;
        color: #8892a6;
        font-weight: 600;
        font-size: 16px;

        &:hover {
          background: #f0f2f5 !important;
          color: #222;
        }
      }
    }
    .el-submenu.is-active .el-submenu__title {
      color: #222;
      i {
        color: #222;
      }
    }
  }
  .footer {
    border-top: 1px solid #d8d8d8;
    display: flex;
    flex-direction: column;
    padding: 28px 12px 28px 39px;
    .badge {
      margin-right: 40px;
    }
    &-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      .img {
        width: 24px;
        height: 24px;
        margin-right: 11px;
      }
      .avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 11px;
      }
      .text {
        color: #333;
        font-size: 16px;
      }
      .code {
        font-size: 22px;
        margin-left: 16px;
      }
      &:first-child {
        margin-bottom: 16px;
      }
    }
  }
}
.content-box {
  .content {
    line-height: 24px;
  }
  .time {
    margin-top: 48px;
    text-align: right;
  }
}
::v-deep .el-dialog__header {
  display: flex;
  justify-content: center;
  font-weight: 600;
}
</style>
